<template>
  <div class="user-profile">
    <div class="profile-container">
      <h2 class="profile-title">我的信息</h2>

      <el-card class="profile-card">
        <div class="profile-header">
          <el-avatar :size="100" :src="userInfo.avatar" class="user-avatar">
            {{ userInfo.nickname?.charAt(0) }}
          </el-avatar>
          <div class="user-basic-info">
            <h3>{{ userInfo.nickname }}</h3>
            <p class="user-role">{{ userInfo.role === 'administrator' ? '管理员' : '普通用户' }}</p>
          </div>
        </div>

        <el-divider />

        <el-form :model="userInfo" label-width="100px" class="profile-form" ref="profileFormRef">
          <el-form-item label="用户ID">
            <el-input v-model="userInfo.id" disabled />
          </el-form-item>

          <el-form-item label="用户昵称">
            <el-input v-model="userInfo.nickname" />
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input v-model="userInfo.phone" />
          </el-form-item>

          <el-form-item label="真实姓名">
            <el-input v-model="userInfo.realname" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updateProfile" :loading="loading">
              {{ loading ? '保存中...' : '保存修改' }}
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8087',
  timeout: 10000,
});

const userInfo = ref({
  id: 0,
  nickname: '',
  phone: '',
  realname: '',
  role: '',
  avatar: '',
  createTime: '',
  lastLoginTime: ''
});

const originalInfo = ref({});
const loading = ref(false);
const profileFormRef = ref();

// 计算属性格式化时间
const formatCreateTime = computed(() => {
  return userInfo.value.createTime ? formatDate(userInfo.value.createTime) : '';
});

const formatLastLoginTime = computed(() => {
  return userInfo.value.lastLoginTime ? formatDate(userInfo.value.lastLoginTime) : '';
});

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
}

// 获取当前用户ID（从token中解析）
function getCurrentUserId() {
  const token = localStorage.getItem("token");
  if (!token) return null;

  try {
    // 这里需要根据您的token解析逻辑来获取用户ID
    // 假设token中包含用户ID信息
    const payload = JSON.parse(atob(token.split('.')[1]));
    console.log(payload.MANAGER_ID,payload.userId)
    return payload.MANAGER_ID || payload.userId || null;
  } catch (error) {
    console.error('解析token失败:', error);
    return null;
  }
}

// 获取用户信息
async function getUserInfo() {
  try {
    const userId = getCurrentUserId();
    if (!userId) {
      ElMessage.error('无法获取用户信息，请重新登录');
      return;
    }
    const token = localStorage.getItem("token");
    console.log(token );
    const response = await apiClient.get(`/user/getid/${userId}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    if (response.data && response.data.code === 200) {
      userInfo.value = response.data.data;
      originalInfo.value = { ...response.data.data };
    } else {
      ElMessage.error(response.data.message || '获取用户信息失败');
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败');
  }
}

// 更新用户信息
async function updateProfile() {
  try {
    loading.value = true;

    const token = localStorage.getItem("token");
    // 使用后端存在的 /user/edit 接口
    const response = await apiClient.put('/user/edit', userInfo.value, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    if (response.data && response.data.code === 200) {
      ElMessage.success('信息更新成功');
      originalInfo.value = { ...userInfo.value };
      // 重新获取用户信息确保数据一致
      await getUserInfo();
    } else {
      ElMessage.error(response.data.message || '更新失败');
    }
  } catch (error) {
    console.error('更新用户信息失败:', error);
    ElMessage.error('更新失败，请稍后重试');
  } finally {
    loading.value = false;
  }
}

// 重置表单
function resetForm() {
  userInfo.value = { ...originalInfo.value };
  ElMessage.info('已重置修改');
}

onMounted(() => {
  getUserInfo();
});
</script>

<style scoped>
.user-profile {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.profile-container {
  max-width: 800px;
  margin: 0 auto;
}

.profile-title {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
  font-size: 24px;
}

.profile-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
}

.user-avatar {
  margin-right: 20px;
  background-color: #409eff;
}

.user-basic-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #303133;
}

.user-role {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.profile-form {
  padding: 0 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>



<!--<template>-->
<!--  <div class="user-profile">-->
<!--    <div class="profile-container">-->
<!--      <h2 class="profile-title">我的信息</h2>-->

<!--      <el-card class="profile-card">-->
<!--        <div class="profile-header">-->
<!--          <el-avatar :size="100" :src="userInfo.avatar" class="user-avatar">-->
<!--            {{ userInfo.userNickname?.charAt(0) }}-->
<!--          </el-avatar>-->
<!--          <div class="user-basic-info">-->
<!--            <h3>{{ userInfo.userNickname }}</h3>-->
<!--            <p class="user-role">{{ userInfo.role === 'administrator' ? '管理员' : '普通用户' }}</p>-->
<!--          </div>-->
<!--        </div>-->

<!--        <el-divider />-->

<!--        <el-form :model="userInfo" label-width="100px" class="profile-form">-->
<!--          <el-form-item label="用户ID">-->
<!--            <el-input v-model="userInfo.id" disabled />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="用户昵称">-->
<!--            <el-input v-model="userInfo.userNickname" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="手机号码">-->
<!--            <el-input v-model="userInfo.phone" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="邮箱">-->
<!--            <el-input v-model="userInfo.email" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="注册时间">-->
<!--            <el-input v-model="userInfo.createTime" disabled />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="最后登录">-->
<!--            <el-input v-model="userInfo.lastLoginTime" disabled />-->
<!--          </el-form-item>-->

<!--          <el-form-item>-->
<!--            <el-button type="primary" @click="updateProfile">保存修改</el-button>-->
<!--            <el-button @click="resetForm">重置</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted } from 'vue';-->
<!--import { ElMessage } from 'element-plus';-->
<!--import axios from 'axios';-->

<!--const apiClient = axios.create({-->
<!--  baseURL: 'http://localhost:8085',-->
<!--  timeout: 10000,-->
<!--});-->

<!--const userInfo = ref({-->
<!--  id: 0,-->
<!--  userNickname: '',-->
<!--  phone: '',-->
<!--  email: '',-->
<!--  role: '',-->
<!--  avatar: '',-->
<!--  createTime: '',-->
<!--  lastLoginTime: ''-->
<!--});-->

<!--const originalInfo = ref({});-->

<!--// 获取用户信息-->
<!--async function getUserInfo() {-->
<!--  try {-->
<!--    const token = localStorage.getItem("token");-->
<!--    const response = await apiClient.get('/user/getid/{id}', {-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      userInfo.value = response.data.data;-->
<!--      originalInfo.value = { ...response.data.data };-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('获取用户信息失败:', error);-->
<!--    ElMessage.error('获取用户信息失败');-->
<!--  }-->
<!--}-->

<!--// 更新用户信息-->
<!--async function updateProfile() {-->
<!--  try {-->
<!--    const token = localStorage.getItem("token");-->
<!--    const response = await apiClient.put('/user/update', userInfo.value, {-->
<!--      headers: {-->
<!--        'Authorization': `Bearer ${token}`-->
<!--      }-->
<!--    });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      ElMessage.success('信息更新成功');-->
<!--      originalInfo.value = { ...userInfo.value };-->
<!--    } else {-->
<!--      ElMessage.error(response.data.message || '更新失败');-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('更新用户信息失败:', error);-->
<!--    ElMessage.error('更新失败');-->
<!--  }-->
<!--}-->

<!--// 重置表单-->
<!--function resetForm() {-->
<!--  userInfo.value = { ...originalInfo.value };-->
<!--  ElMessage.info('已重置修改');-->
<!--}-->

<!--onMounted(() => {-->
<!--  getUserInfo();-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--.user-profile {-->
<!--  padding: 20px;-->
<!--  background-color: #f5f7fa;-->
<!--  min-height: calc(100vh - 60px);-->
<!--}-->

<!--.profile-container {-->
<!--  max-width: 800px;-->
<!--  margin: 0 auto;-->
<!--}-->

<!--.profile-title {-->
<!--  text-align: center;-->
<!--  margin-bottom: 30px;-->
<!--  color: #303133;-->
<!--  font-size: 24px;-->
<!--}-->

<!--.profile-card {-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.profile-header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  padding: 20px;-->
<!--}-->

<!--.user-avatar {-->
<!--  margin-right: 20px;-->
<!--  background-color: #409eff;-->
<!--}-->

<!--.user-basic-info h3 {-->
<!--  margin: 0 0 8px 0;-->
<!--  font-size: 20px;-->
<!--  color: #303133;-->
<!--}-->

<!--.user-role {-->
<!--  margin: 0;-->
<!--  color: #909399;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.profile-form {-->
<!--  padding: 0 20px;-->
<!--}-->

<!--:deep(.el-form-item__label) {-->
<!--  font-weight: 500;-->
<!--}-->
<!--</style>-->